<template>
  <el-tabs class="global-common-tabs" slot="tabs" v-model="tabName" @tab-click="$emit('tab-click',$event)">
    <slot></slot>
  </el-tabs>
</template>

<script>
  export default {
    name: 'CommonTabs',
    props: {
      value: {
        type: String
      }
    },
    computed: {
      tabName: {
        get: function() {
          return this.value
        },
        set: function(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .global-common-tabs {

    ::v-deep .el-tabs__header {
      margin: 0 !important;
    }

    ::v-deep .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #dfe4ed;
      z-index: 1;
    }
  }
</style>

